<template>
  <view class="index">
    <view class="home-banner">
      <swiper :indicator-dots="false" :autoplay="true" :interval="2500" :duration="3500" class="tui-banner-swiper swiper"
        :circular="true" @change="swiperChange" :current="currentSwiper">
        <swiper-item v-for="(item, index) in banner" :key="index" class="carousel-item">
          <image class="swiper-image " :src="item.pic" mode="widthFix" lazy-load>
          </image>
        </swiper-item>
      </swiper>
      <!--重置小圆点的样式  -->
      <view class="dots" v-if="banner.length > 1">
        <block v-for="(item, index) in banner">
          <view :class="index == currentSwiper ? ' active' : ''" class="dot"></view>
        </block>
      </view>
      <view class="head-box" v-if="$store.getters.token||userInfo.uid">
        <view class="head-panel">
          <image :src="userInfo.avatar" mode="widthFix" style="width: 88rpx;height: 88rpx;border-radius: 50%;margin-right: 10px;"></image>
          {{userInfo.nickname}}
        </view>
      </view>
    </view>
    <view class="common-panel home-panel">
      <view class="sub-banner">
        <swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="3500">
          <swiper-item v-for="(item, index) in subban" :key="index" class="carousel-item">
            <image class="swiper-image " :src="item.pic" mode="widthFix" lazy-load>
            </image>
          </swiper-item>
        </swiper>
      </view>
      <view class="cell-group">
        <view class="van-cell" @click="goOrder">
          <view class="cell-title">
            <view class="title">
              <image src="@/static/logo.png" mode="widthFix"></image> 订单
            </view>
          </view>
          <view class="cell-value">
            <text class="iconfont icon-jiantou"></text>
          </view>
        </view>
        <view class="item" v-for="(order,orderListIndex) in orderList" :key="orderListIndex">
          <view class="list" v-for="(cart,cartInfoIndex) in order.cartInfo" v-if="orderListIndex < 5" :key="cartInfoIndex">
            <view class="list-item">
              {{cart.productInfo.storeName}}
            </view>
            <view class="price">
              ￥{{
              cart.productInfo.attrInfo
              ? cart.productInfo.attrInfo.price
              : cart.productInfo.price
              }}
            </view>
            <view class="timestr" style="font-size: 14px;color: #999999;">
              {{ order.createTime }}
            </view>
          </view>
        </view>
        <view class="noCart" v-if="orderList.length === 0 && page > 1">
          <view class="pictrue">
            <image src="@/static/images/noOrder.png" />
          </view>
        </view>
      </view>
      <view style="width: 100%;height: 30px;"></view>
    </view>
    <tab-bar></tab-bar>
  </view>
</template>

<script>
  import {
    mapState,
    mapGetters,
    mapMutations
  } from 'vuex';
  import {
    getHomeData,
    getShare,
    scanQrcode
  } from "@/api/public";
  import {
    getOrderData,
    getOrderList
  } from "@/api/order";
  import stringify from '@/utils/querystring';
  export default {
    data() {
      return {
        current: 0,
        currentSwiper: 0,
        banner: [],
        orderList: [],
        type: 4,
        subban: [{
          id: 1,
          pic: 'https://ftp.bmp.ovh/imgs/2020/12/4db28cd308393c07.png'
        }, {
          id: 2,
          pic: 'https://ftp.bmp.ovh/imgs/2020/12/4db28cd308393c07.png'
        }, ],
        page: 1,
        limit: 20,
        loaded: false,
        loading: false,
        deviceQuery: {}
      }
    },
    computed: mapGetters(["userInfo"]),
    onLoad() {
      // uni.hideTabBar();
      uni.showLoading({
        title: "加载中",
      });
      let that = this;
      getHomeData().then((res) => {
        that.logoUrl = res.data.logoUrl;
        res.data.banner.map((item) => (item.bgcolor = item.color || ""));
        that.$set(that, "banner", res.data.bigroll);
        that.$set(that, "subban", res.data.banner);
        console.log(res.data, 'homedata')
        uni.hideLoading();
        // that.doColorThief()
      });

    },
    onShow() {
      this.getOrderList();
      this.changeTabBar({
        index: 0
      })
      if (this.$store.getters.token) {
        let that = this;
        uni.getStorage({
          key: 'deviceQuery',
          success: function(res) {
            let routeQuery = res.data;
            let scparm = stringify(routeQuery);
            that.handleScanLogistic(scparm)
          }
        })
      } else {
        uni.showModal({
          content: '您还未授权登陆，请授权登陆后继续操作',
          showCancel: true,
          success(res) {
            if (res.confirm) {
              that.$yrouter.reLaunch({
                path: "/pages/authorization/index",
              })
            } else if (res.cancel) {
              uni.showToast({
                icon: 'none',
                title: '取消授权'
              })
            }
          }
        })
      }
    },
    onHide: function() {
      this.orderList = [];
      this.page = 1;
      this.limit = 20;
      this.loaded = false;
      this.loading = false;
    },
    methods: {
      ...mapMutations(['changeTabBar']),
      swiperChange: function(e) {
        this.currentSwiper = e.detail.current
      },
      // 外部扫码登陆状态下启动扫码进入逻辑
      async handleScanLogistic(query) {
        let scanPost = await scanQrcode(`/device/qrcode?${query}`);
        console.log(scanPost, 'res');
        let that = this;
        if (scanPost.status == 200) {
          uni.removeStorageSync('deviceQuery')
          let q = {
            productId: scanPost.data.storeInfo.id,
            cartNum: 1,
            new: 1,
            uniqueId: scanPost.data.productValue['默认'].unique,
          };
          postCartAdd(q)
            .then(function(rescrd) {
              that.$yrouter.push({
                path: "/pages/order/OrderSubmission/index",
                query: {
                  id: rescrd.data.cartId,
                  isqrCode: 1,
                  machinenum: scanPost.data.storeInfo.machineNum,
                  aislenumber: scanPost.data.storeInfo.aisleNumber,
                  aislestatus: scanPost.data.storeInfo.aisleStatus,
                  aislestatusmsg: scanPost.data.storeInfo.aisleStatusmsg,
                  qrTimestamp: scanPost.data.storeInfo.qrTimestamp,
                  qrSign: scanPost.data.storeInfo.qrSign,
                  isqrCode: 1,
                  goodCode: scanPost.data.storeInfo.goodCode,
                  goodName: scanPost.data.storeInfo.goodName
                },
              });

            })
            .catch((error) => {
              uni.showToast({
                title: error.response.data.msg,
                icon: "none",
                duration: 2000,
              });
            });
        } else {
          uni.showToast({
            icon: 'none',
            title: scanPost.msg
          })
        }
      },
      goOrder: function() {
        let that = this;
        if (this.$store.getters.token) {
          this.$yrouter.push({
            path: "/pages/order/MyOrder/index",
          });
        } else {
          uni.showModal({
            content: '您还未授权登陆，请授权登陆后继续操作',
            showCancel: true,
            success(res) {
              if (res.confirm) {
                that.$yrouter.reLaunch({
                  path: "/pages/authorization/index",
                })
              } else if (res.cancel) {
                uni.showToast({
                  icon: 'none',
                  title: '取消授权'
                })
              }
            }
          })
        }
      },
      getOrderList() {
        if (this.loading || this.loaded) return;
        this.loading = true;
        const {
          page,
          limit,
          type
        } = this;
        getOrderList({
          page,
          limit,
          type
        }).then(res => {
          this.orderList = this.orderList.concat(res.data);
          this.page++;
          this.loaded = res.data.length < this.limit;
          this.loading = false;
        });
      },
    }
  }
</script>

<style lang="less">
  .home-banner {
    width: 750rpx;
    height: 800rpx;
    position: relative;

    .swiper {
      height: 800upx;
    }

    .carousel-item {
      width: 100%;
      height: 100%;
      // padding: 0 28upx;
      overflow: hidden;
    }

    .swiper-image {
      width: 100%;
      height: 100%;
      // border-radius: 10upx;
      // background: #ccc;
    }
  }

  .head-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 30rpx;

    .head-panel {
      background-color: #FFFFFF;
      border-top-left-radius: 20rpx;
      border-top-right-radius: 20rpx;
      padding: 0 20rpx;
      height: 160rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }

  .common-panel {
    padding: 30rpx;
  }

  .sub-banner {
    width: 100%;
    height: 150rpx;
    position: relative;

    .swiper {
      height: 150rpx;
    }

    .carousel-item {
      width: 100%;
      height: 100%;
      // padding: 0 28upx;
      overflow: hidden;
    }

    .swiper-image {
      width: 100%;
      height: 100%;
      // border-radius: 10upx;
      // background: #ccc;
    }
  }

  .home-panel {
    margin-bottom: 100rpx;
  }

  .cell-group {
    border-radius: 12rpx;
    background-color: #fff;
    margin-top: 30rpx;
    padding-bottom: 12rpx;

    .list {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 6rpx 12rpx;

      .list-item {
        width: 227rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .van-cell {
      position: relative;
      display: flex;
      box-sizing: border-box;
      width: 100%;
      padding: 10px 16px;
      overflow: hidden;
      color: #323233;
      font-size: 14px;
      line-height: 24px;
      justify-content: space-between;
      align-items: center;

      .cell-title {
        .title {
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }

        image {
          width: 82rpx;
          height: 30rpx;
          margin-right: 10rpx;
        }
      }

      .cell-value {
        font-size: 14px;
        color: #666666;
      }
    }
  }

  /*banner*/

  .tui-banner-box {
    width: 100%;
    padding-top: 20rpx;
    box-sizing: border-box;
    background: #fff;
  }

  .tui-banner-swiper {
    width: 100%;
    height: 240rpx;
  }

  .tui-banner-item {
    padding: 0 16rpx;
    box-sizing: border-box;
  }

  .tui-slide-image {
    width: 100%;
    height: 240rpx;
    display: block;
    border-radius: 12rpx;
    /* transition: all 0.1s linear; */
  }

  .tui-banner-scale {
    transform: scaleY(0.9);
    transform-origin: center center;
  }

  /* #ifdef MP-WEIXIN */
  .tui-banner-swiper .wx-swiper-dot {
    width: 8rpx;
    height: 8rpx;
    display: inline-flex;
    background: none;
    justify-content: space-between;
  }

  .tui-banner-swiper .wx-swiper-dot::before {
    content: '';
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16rpx;
    overflow: hidden;
  }

  .tui-banner-swiper .wx-swiper-dot-active::before {
    background: #fff;
  }

  .tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
    width: 16rpx;
  }

  /* #endif */

  /* #ifndef MP-WEIXIN */
  >>>.tui-banner-swiper .uni-swiper-dot {
    width: 8rpx;
    height: 8rpx;
    display: inline-flex;
    background: none;
    justify-content: space-between;
  }

  >>>.tui-banner-swiper .uni-swiper-dot::before {
    content: '';
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16rpx;
    overflow: hidden;
  }

  >>>.tui-banner-swiper .uni-swiper-dot-active::before {
    background: #fff;
  }

  >>>.tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
    width: 16rpx;
  }

  /* #endif */
  /*banner*/
  /*用来包裹所有的小圆点  */
  
  .dots {
    width: auto;
    height: 36rpx;
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 20rpx;
    bottom: 200rpx;
  }
  
  /*未选中时的小圆点样式 */
  
  .dot {
    width: 26rpx;
    height: 26rpx;
    border-radius: 50%;
    margin-right: 26rpx;
    background-color: white;
  }
  
  /*选中以后的小圆点样式  */
  
  .active {
    width: 26rpx;
    height: 26rpx;
    background-color: rgba(255,255,255,.5);
  }
</style>
